<div id="root">
  <h2>{{num}}</h2>
  <button @click="plus()">+</button>
  <button @click="less()">-</button>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<!-- 我们在这里没有操作dom,没有渲染视图吧?这里面都被Vue的视图模型干了 -->
<!-- 渲染视图就是我们在demo1里写的   h2.innerText = num; -->
<script>
  new Vue({
    el: "#root",
    data: {
      num: 0,
    },
    methods: {
      plus() {
        this.num++;
      },
      less() {
        this.num--;
      },
    },
  });
</script>
